<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/details.css"/>
	</head>
	<body>
		<script src="../lib/jquery/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../lib/magnifypicture/fangdajing.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/setcookie.js" type="text/javascript" charset="utf-8"></script>
		
		<div class="wipe clean">
			<div class="box">
				
			</div>
			<div class="right">
				<h2>标题</h2>
				<h4>￥1500</h4>
				<h5>春季大降价!!!!</h5>
				<p>服务说明</p>
				<ul>
					<li>*满99元包邮</li>
					<li>*本商品使用或试用后不支持7天无理由退换货</li>
				</ul>
				<button class="addCar" type="button">加入购物车</button>
				<button type="button">立即结算</button>
			</div>
		</div>
		
		<script type="text/javascript">
			
			//1.获取到localstorage里面的数据
			let goods_info=JSON.parse(localStorage.getItem('goods_info'));
			// console.log(goods_info);
			//2.判断数据是否存在
			if (!goods_info) {
			  alert('您要查看的数据不存在')
			  // 跳转回列表页面
			  window.location.href = './shops.html'
			};
			//3.页面的渲染
			let str='';
			str+=`
				<h2>${goods_info.name}</h2>
				<h4>￥${goods_info.price}</h4>
				<h5>${goods_info.des}</h5>
				<p>服务说明</p>
				<ul>
					<li>*满99元包邮</li>
					<li>*本商品使用或试用后不支持7天无理由退换货</li>
				</ul>
				<button class="addCar" type="button" >加入购物车</button>
				<button type="button">立即结算</button>
			`;
			$('.right').html(str);
			let str2=goods_info.img_src;
			// console.log(str2)
			//4.放大镜效果
			magnifier(".box",260,260,str2,180,180,400)
			
			//5.加入购物车的点击事件
			$('.addCar').click(function(){
				//5.1.判断是否登录
				if(!getCookie('username')){
					alert('请先登录！！')
					window.location.href="./login.html"
				}
				//5.2 添加到购物车的那个数组里面，如果这个数组存在，就用这个数组，如果这个数组不存在，就新建一个数组
				let jsonStr=localStorage.getItem('carShops');
				// console.log(JSON.parse(jsonStr))
				let cartsArr=null;
				if(jsonStr){
					cartsArr=JSON.parse(jsonStr);
				}else{
					cartsArr=[]
				};
				//5.3 将这个对象加到数组里面之前，先要判断里面是否包含了这个对象，用id来判断
				console.log(cartsArr)
				let obj=cartsArr.find(v=>v.id==goods_info.id);
				if(obj){
					alert('该商品已经加入购物车')
				}else{
					//将此页面的对象加到购物车的数组里面
					cartsArr.push(goods_info);
					//给数组中的每一个对象加入一个goodsCount属性
					for(let i=0 ;i<cartsArr.length;i++){
						cartsArr[i].goodsCount=1;
					}
					console.log(cartsArr)
					localStorage.setItem('carShops', JSON.stringify(cartsArr))
				}
				
			})
		</script>
	</body>
</html>
